<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../libs/bootstrap-3.3.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/lib.css" />
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/jquery.formHelp.js"></script>
</head>
<body>
<div class="definewidth m20">
    <form class="form-inline" action="list.html" method="get">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">部门名称</div>
                <input type="text" class="form-control" id="organization" placeholder="">
            </div>
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-primary">查询</button>
            <button type="button" class="btn btn-success" id="addnew">新增</button>
        </div>
    </form>
    <button type="button" class="btn btn-danger" id="delect">删除</button>
    <table class="table table-bordered table-hover definewidth m10" id="table">
    </table>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="modalUser">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">部门管理</h4>
                </div>
                <div class="modal-body">
                    <form class="form">
                        <div class="form-group fix">
                            <div class="input-group w300 mb10">
                                <div class="input-group-addon">上级部门</div>
                                <input type="text" class="form-control" id="1">
                            </div>
                            <div class="input-group w300 mb10 hidden">
                                <div class="input-group-addon">部门id</div>
                                <input type="text" class="form-control" id="2">
                            </div>
                            <div class="input-group w300 mb10">
                                <div class="input-group-addon">部门名称</div>
                                <input type="text" class="form-control" id="3">
                            </div>
                            <div class="input-group mb10">
                                <div class="input-group-addon">部门描述</div>
                                <textarea class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submintBtn">确定</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../libs/bootstrap-table/bootstrap-table.min.css" />
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="list.js"></script>
<script type="text/javascript">
    $.ajax({
        type: "POST",
        url: ctx + "/organization/getOrganization",
        success: function(data){
            if(data.code == 200){
                setOption('#organization', data.data)
            }
        }
    });
    var formdata = '';
    $('#addnew').click(function () {
        $('#modalUser').modal({backdrop: 'static', keyboard: false});
    })
    $("#submintBtn").click(function () {
        formdata = $("#form").serializeJson()
        $.ajax({
            type: 'POST',
            url: ctx + "/project/add",
            contentType: "application/json",
            dataType: 'json',
            data: JSON.stringify(formdata),
            success: function(data){
                alert(data.msg)
            }
        })
    })

    function setOption(id, param){
        var html = '';
        html +='<option value="">请选择</option>';
        for (var i =0;i<param.length;i++){
            html +='<option value="'+ param[i].organizationId +'">'+ param[i].orgName +'</option>';
        }
        $(id).append(html);
    }
</script>
</body>
</html>